<template>
<div>
<div z-index="1999">
    <el-table
      :data="seeDetails"
      border
      style="width: 100%"
      center
    >
      <el-table-column
        prop="id"
        label="序号"
        width="60"
      />
      <el-table-column
        prop="file"
        label="类型"
        width="100"
      />
      <el-table-column
        prop="file_name"
        label="名称"
        width="180"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-button>
             <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="btnBox">
      <el-button class="btn" type="primary" size="mini" @click="closed()">关闭</el-button>
    </div>
  </div>
   <!-- 图片预览 -->
    <el-image-viewer z-inex="3000" v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
</div>

</template>
<script>
import { deleteAccessory, seeAccessory } from '@/api/repair'
export default {
  name: 'dialog',
   components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  props: ['accids'],
  data() {
    return {
      tableData: [],
      closeds: false,
      seeDetails: '',
      accidsW: '',
       imgViewerVisible: false, // 图片预览标识
         imgList: [], // 预览图片数据
    }
  },
  watch: {
    accids() {
      this.accidsW = this.accids
      this.handleClick()
    }
  },
  created() {
    this.handleClick()
  },
  methods: {
    handleClick() {
      const that = this
      const data = {
        task_id: that.accids,
        offset: 0,
        limit: 50
      }
      seeAccessory(data).then(res => {
        console.log(22323232)
        if (res.code == 200) {
          this.seeDetails = res.data.files
          this.seeDetails.forEach(item => {
            if (item.file_type == 1) {
              item.file= '图片'
            } else {
              item.file = '文件'
            }
          })
        }
      })
    },
    closed() {
      this.$emit('detailes', this.closeds)
    },
    // 删除附件
    handleDelete(a, b) {
      console.log(a)
      const that = this
      deleteAccessory({ id: b.id.toString() }).then(res => {
        that.handleClick()
      })
    },
         // 关闭图片预览
    closeImgViewer() {
      this.imgViewerVisible = false
    },
     /**
     * @description: 查看附件/图片
     * @author: 书童
     */
    checkInfo(row) {
      console.log(row.file_url)
      if (row.file_type === '1') {
        // 图片
        this.imgViewerVisible = true
        this.imgList = [row.file_url]
      } else {
        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.file_url)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.header{
  display: inline-block;
  text-align: center;
}
.btnBox{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
  // border-top:1px solid #eee;
}
::v-deep.el-table .cell {
  text-align: center;
}
</style>
